<template>
  <div class="chart-container app-container nohead">
    <el-alert
      title="免责声明：Highcharts组件不属于JSBOS产品，只用于介绍第三方组件如何在《智慧云学院》中使用。如果对这些组件感兴趣，请使用正版。"
      type="warning"
      :closable="false"
      class="mb-10"
    />
    <highcharts
      :options="chartOptions"
      :callback="myCallback"
      style="height: 530px; margin-top: 30px"
    ></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
export default {
  name: "extend-graphDemo-highchartsArea",
  components: {
    highcharts: Chart,
  },
  data() {
    return {
      chartOptions: {
        chart: {
          type: "area",
        },
        title: {
          text: "包含负值的面积图",
        },
        xAxis: {
          categories: ["苹果", "橘子", "梨", "葡萄", "香蕉"],
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            name: "小张",
            data: [5, 3, 4, 7, 2],
          },
          {
            name: "小彭",
            data: [2, -2, -3, 2, 1],
          },
          {
            name: "小潘",
            data: [3, 4, 4, -2, 5],
          },
        ],
      },
    };
  },
  mounted() {},

  methods: {
    myCallback() {
      console.log("this is callback function");
    },
  },
};
</script>
